<template>
  <div class="content">
    <div class="head_box">
      <img class="bj" src="/static/lt_bj.png" alt="" />
      <div class="head" :style="{ height: navBarHeight + 'px' }">
        <p :style="{ height: statusBarHeight + 'px' }"></p>
      </div>
      <div class="box">
        <div @click="changeCityPop">
          <p>{{ groupName ? groupName : "全国" }}-接单总群</p>
          <u-icon name="arrow-down-fill" color="#4E5969" size="16"></u-icon>
          <p class="search" @click.stop="toChatHistory">
            <img src="/static/search-index.png" alt="" />
          </p>
        </div>
        <img @click="toGroup" src="/static/user.png" alt="" />
      </div>
    </div>

    <!--  -->

    <scroll-view
      id="scroll-view"
      class="list_box"
      :scroll-into-view="intoView"
      @scroll="onScroll"
      @scrolltoupper="handleScrollToUpper"
      scroll-y
      :style="{ height: `calc(100vh - ${105 + scrollViewHeight}px)` }"
    >
      <div class="loading_more" v-if="loadingShow">
        <u-loading-icon
          mode="circle"
          text="加载中..."
          timing-function="linear"
        ></u-loading-icon>
      </div>

      <div
        class="list"
        v-for="(item, index) in approvedList"
        :key="index"
        :id="`item${index}`"
      >
				<div class="yq" v-if="item.sendUserId"><span>{{item.memberUserName}}</span>邀请<span>{{item.sendUserName}}</span>加入群聊</div>
        <block v-else>
          <div class="left" v-if="userId != item.memberUserId">
            <img
              :src="item.avatar ? item.avatar : '/static/mr_tx.png'"
              alt=""
              @click="toUser(item)"
            />
            <div class="b">
              <p class="name" v-if="param.sendGroupUserId == 1">
                {{ item.sendGroupUserName }}群-{{ item.utilTime }}
              </p>
              <p class="name" v-else>
                {{ item.utilTime }}
              </p>
              <div class="text">
                <text 
                  :selectable="true"
                  :user-select="true"
                >
                  {{ item.message }}
                </text>
                
                <div class="img_list" v-if="item.pictureList.length">
                  <img
                    @click="previewImg(item.pictureList, child)"
                    v-for="(child, i) in item.pictureList"
                    :key="i"
                    :src="child"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="right" v-else>
            <div class="b">
              <p class="name" v-if="param.sendGroupUserId == 1">
                {{ item.sendGroupUserName }}群-{{ item.utilTime }}
              </p>
              <p class="name" v-else>
                {{ item.utilTime }}
              </p>
              <div class="text" @longpress="onLongPress(index)" @click="clickHidePress(index)">
                <text 
                  :selectable="true"
                  :user-select="true"
                >
                  {{ item.message }}
                </text>
                <div class="img_list" v-if="item.pictureList.length">
                  <img
                    @click="previewImg(item.pictureList, child)"
                    v-for="(child, i) in item.pictureList"
                    :src="child"
                    alt=""
                  />
                </div>
                <div @click="clickWithdraw(item)" :class="item.isWithdraw?'withdraw on':'withdraw'">
                  <p class="text-bg">撤回</p>
                  <p class="sjx"></p>
                </div>
              </div>
              <span class="tag" v-if="item.status == 1">待审核</span>
              
            </div>
            <img
              :src="item.avatar ? item.avatar : '/static/mr_tx.png'"
              alt=""
              @click="toUser(item)"
            />
          </div>
        </block>
      </div>
      <div v-if="isMenuVisible" class="context-menu">
        <button @click="selectAll">全选</button>
        <button @click="copyText">复制</button>
      </div>
      <div class="no_data" v-if="!approvedList.length">
        <img src="/static/no-data.png" alt="" />
        <p>暂无接单消息</p>
      </div>

      <!-- <div class="gg_box" v-if="ggShow" :style="{top:navBarHeight+60+'px'}">
				<div class="box">
					<p class="img"></p>
					<div>
						<p class="name">重庆群</p>
						<p class="text">内容内容内容内容内容内内容内容内容内</p>
						<p style="height: 20rpx;"></p>
					</div>
					<p class="close" @click="ggShow = false">广告 <u-icon name="close" color="#ffffff" size="14"></u-icon></p>
				</div>
			</div> -->
    </scroll-view>

    <div class="input_box">
      <div class="box" :style="{ paddingBottom: isIphoneXnum + 12 + 'px' }">
        <div class="label" v-if="isExamine">
          <p @click="toCompany">
            <img src="/static/index-icon0.png" alt="" />公司转让
          </p>
          <p @click="toLocal">
            <img src="/static/index-icon1.png" alt="" />本地同行
          </p>
          <p @click="toGuarantee">
            <img src="/static/index-icon2.png" alt="" />担保交易
          </p>
          <p @click="toExposure">
            <img src="/static/index-icon3.png" alt="" />曝光台
          </p>
          <p @click="clickNotice">
            <img src="/static/index-icon4.png" alt="" />群公告
          </p>
        </div>
        <div class="sr_input">
          <div @click="clickReleasePop">
            <img src="/static/index-icon5.png" alt="" />
            <p>请输入你的接单信息</p>
          </div>
          <div @click="clickMessagePop">
            <img src="/static/index-icon6.png" alt="" />
            <p>私信</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布 -->
    <u-popup
      @close="closeRelease"
      closeOnClickOverlay
      safeAreaInsetBottom
      :round="12"
      :show="releaseShow"
      mode="bottom"
    >
      <release-pop
        @close="closeRelease"
        :isRefresh="isRefresh"
        :notUsedCount="notUsedCount"
      ></release-pop>
    </u-popup>

    <!-- 私信 -->
    <u-popup
      @close="closeMessage"
      safeAreaInsetBottom
      :round="12"
      :show="messageShow"
      mode="bottom"
    >
      <message-pop @close="closeMessage" :isRefresh2="isRefresh2"></message-pop>
    </u-popup>

    <!-- 公告 -->
    <u-popup safeAreaInsetBottom :round="12" :show="noticeShow" mode="bottom">
      <notice-pop @close="closeNotice" :msg="noticeMsg"></notice-pop>
    </u-popup>

    <!-- 选择接单群 -->
    <city-picker
      :isRefresh1="isRefresh1"
      :show="isCityShow"
      @closeCity="closeCity"
      @confirm="changeCity"
    >
    </city-picker>

    <!-- 提示未激活 -->
    <u-popup :round="12" :show="tipsShow" mode="center">
      <tips-pop @close="closeTips"></tips-pop>
    </u-popup>

    <!-- 激活弹窗 activeShow-->
    <u-popup safeAreaInsetBottom :round="12" :show="activeShow" mode="bottom">
      <active-pop @close="closeActive" :isRefresh4="isRefresh4"></active-pop>
    </u-popup>

    <!-- 默认弹窗 -->
    <u-popup :round="12" :show="mrShow" mode="center">
      <mr-pop @close="closeMr"></mr-pop>
    </u-popup>

    <!-- 举报弹窗 -->
    <u-popup :round="12" :show="jbShow" mode="center">
      <jb-pop @close="closeJp" :msg="jbMsg" :isRefresh3="isRefresh3"></jb-pop>
    </u-popup>

    <!-- 微信公众号二维码 -->
    <u-popup :round="12" :show="gzhShow" mode="center">
      <div class="ewm_box">
        <p class="close" @click="gzhShow = false">
          <u-icon name="close" color="#999999" size="20"></u-icon>
        </p>
        <img
          :show-menu-by-longpress="true"
          mode="widthFix"
          src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQFw8TwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyczYxNFFGOWdmQUgxMDAwME0wN2QAAgReKY5nAwQAAAAA"
          alt=""
        />
        <p>长按二维码识别关注</p>
        <p class="close1" @click="gzhShow = false">关闭</p>
      </div>
    </u-popup>

    <div class="kehu_box">
      <button type="primary" open-type="contact">
        <img src="/static/kehu.png" alt="" />
      </button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex"
import api from "@/api"
import { getUserToken } from '@/utils/auth';
import { formatDateAll } from "@/utils/utils.js"
import { getTimeUtils } from "@/utils/utils.js"
import ReleasePop from "./components/ReleasePop.vue"
import MessagePop from "./components/MessagePop.vue"
import NoticePop from "./components/NoticePop.vue"
import TipsPop from "./components/TipsPop.vue"
import ActivePop from "./components/ActivePop.vue"
import MrPop from "./components/MrPop.vue"
import JbPop from "./components/JbPop.vue"
export default {
  components: {
    ReleasePop,
    MessagePop,
    NoticePop,
    TipsPop,
    ActivePop,
    MrPop,
    JbPop,
  },
  data() {
    return {
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      isIphoneXnum: 0,
      loadingShow: false,
      isFx: false, // true 上 false 下
      releaseShow: false, // 发布弹窗
      messageShow: false, // 私信弹窗
      noticeShow: false, // 公告弹窗
      noticeMsg: {},
      tipsShow: false, // 提示弹窗
      mrShow: false,
      activeShow: false, // 激活弹窗
      jbShow: false, // 举报弹窗
      jbMsg: {},

      notUsedCount: 0, // 可使用条数
      isCityShow: false,
      cityMsg: {},
      isRefresh: 0, // 控制组件刷新
      param: {
        sendGroupUserId: 1,
        pageNo: 1,
        pageSize: 20,
      },
      groupName: "",
      list: [],
      isRefresh1: 0,
      isRefresh2: 0,
      isRefresh3: 0,
      isRefresh4: 0,
      intoView: "",
      scrollViewHeight: "",
      isPreviewImage: false,
      shareUserId: "",
      gzhShow: false,
      isa: false,
      ggShow: true,
      isExamine: true, // 是否开启审核
      scrollTop: 0, // 滚动条位置
      messageId:'', // 消息ID
    }
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.userId,
      token: (state) => state.user.token,
      status: (state) => state.user.status,
      userTx: (state) => state.user.userTx,
      userName: (state) => state.user.userName
    }),
    //仅展示审批通过的消息
    approvedList() {
      const approved = this.list.filter(
        (item) =>
          item.status == 2 ||
          (item.memberUserId == this.userId && item.status == 1) || item.sendUserId
      )
      console.log("approvedList", approved)

      return approved
    },
  },
  watch: {
    status: {
      handler(newVal) {
        if (newVal == 2) {
          this.tipsShow = true
        }
      },
      immediate: true,
      // return this.list.filter((v) => (v.status === 2)&&())
    },
  },
  async onLoad(options) {
    console.log(options)
    if (options.messageId) {
      this.messageId = options.messageId
    }
    if (options.shareUserId) {
      this.shareUserId = options.shareUserId
    }
    if (options.groupName) {
      this.groupName = options.groupName
      this.param.sendGroupUserId = options.groupId
    }

    if (getUserToken()) {
      this.getNotice()
    }
  },
  async onShow() {
    await api.user.get_IOS_enable().then((res) => {
      if (res.code == 200) {
        this.isExamine = res.data
      }
    })
    uni.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model)
        let modelmes = res.model
        if (
          modelmes.search("iPhone 16") != -1 ||
          modelmes.search("iPhone 15") != -1 ||
          modelmes.search("iPhone 14") != -1 ||
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25
        } else {
          this.isIphoneXnum = 0
        }
      },
    })
    this.activeShow = false
    this.jbShow = false
    // this.messageShow = false
    this.noticeShow = false
    if (getUserToken()) {
      await api.user
        .follow_wx({
          userId: this.userId,
        })
        .then((res) => {
          if (res.code == 200) {
            if (!res.data) {
              uni.showModal({
                title: "温馨提示",
                content: "由于您未关注公众号，无法实时接收群消息",
                confirmText: "立即关注",
                success: (res) => {
                  if (res.confirm) {
                    this.gzhShow = true
                    this.releaseShow = false
                    this.noticeShow = false
                  }
                },
              })
            } else {
              this.gzhShow = false
            }
          }
        })
    } else {
      console.log(this.isExamine)
      if (this.isExamine) {// 如果开启了审核
        this.mrShow = true
      }
    }
    if (uni.canIUse("getUpdateManager")) {
      console.log("进去版本检测------->")
      const updateManager = uni.getUpdateManager()
      updateManager.onCheckForUpdate(function (res) {
        if (res.hasUpdate) {
          //下载成功
          updateManager.onUpdateReady(function () {
            uni.showModal({
              title: "更新提示",
              content: "新版本已经准备好，是否重启应用？",
              success: function (res) {
                if (res.confirm) {
                  updateManager.applyUpdate()
                }
              },
            })
          })
          //下载失败
          updateManager.onUpdateFailed(function () {
            uni.showModal({
              title: "已经有新版本了哟~",
              content: "新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~",
            })
          })
        } else {
          console.log("最新版本-------》")
        }
      })
    } else {
      uni.showModal({
        title: "提示",
        content:
          "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
      })
    }

    if (this.isPreviewImage) {
      return
    }
    this.param.pageNo = 1
    // uni.showLoading({title: '加载中...'})
    if (getUserToken()) {
      this.mrShow = false
    }

    this.getUserInfo()
    this.getFbNum()
  },
  methods: {
    ...mapActions(["updateUserStatus", "updateUserTx", "updateUserName"]),
    getUserInfo() {
      api.user
        .get_sell_user({
          userId: this.userId,
        })
        .then((res) => {
          if (res.code == 200) {
            // this.param.sendGroupUserId = res.data.groupId
            // this.groupName = res.data.groupName
            this.getList(true)
            if (res.data) {
              this.updateUserName(res.data.nickname)
              this.updateUserStatus(res.data.status)
                // 提示更新头像，跳转到个人中心
              if (!res.data.avatar && this.isExamine) {
                this.getIsUserTxTips()
                this.updateUserTx("/static/mr_tx.png")
              } else {
                this.updateUserTx(res.data.avatar)  
              }
            }
          } else {
            uni.hideLoading()

            this.getList(true)
          }
        })
    },

    getIsUserTxTips() {
      uni.showModal({
        title: "提示",
        content: "请先完善个人信息，上传头像及昵称",
        showCancel: false,
        confirmText: "去上传",
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: `/pages/my/index?back=1`,
            });
          }
        },
      });
    },

    // 获取可发送条数
    getFbNum() {
      api.user
        .package_get({
          userId: this.userId,
        })
        .then((res) => {
          if (res.code == 200) {
            if (!res.data) {
              this.notUsedCount = 0
            } else {
              this.notUsedCount = res.data.notUsedCount
            }
          }
        })
    },

    clickNotice() {
      console.log(this.noticeMsg)
      if (this.noticeMsg && this.noticeMsg.title) {
        this.noticeShow = true
      }
    },

    // 获取公告
    getNotice() {
      let data = {
        status: 0,
        applicationId: 1,
      }
      api.user.notice_list(data).then((res) => {
        if (res.code == 200) {
          if (res.data.length) {
            this.noticeMsg = res.data[0]
            console.log(this.noticeMsg)
            this.noticeShow = true
          }
        }
      })
    },

    getScrollHeight() {
      uni.getSystemInfo({
        success: (res) => {
          const query = uni.createSelectorQuery().in(this)
          query.selectViewport().scrollOffset() // 获取滚动偏移量
          query.select(".head_box").boundingClientRect() // 获取顶部内容的高度
          query.exec((res) => {
            console.log("=======")
            console.log(res)
            if (this.isIphoneXnum) {
              this.scrollViewHeight = res[1].height + 37
            } else {
              this.scrollViewHeight = res[1].height
            }
          })
        },
      })
    },

    previewImg(imgList, imgurl) {
      uni.previewImage({
        current: imgurl, // 当前显示图片的http链接
        urls: imgList, // 需要预览的图片http链接列表
        success: () => {
          console.log("预览成功")
          this.isPreviewImage = true
        },
      })
    },

    // 跳转个人
    toUser(item) {
      console.log(item)
      console.log(this.userId)
      if (!this.isExamine) {
        return
      }
      if (!getUserToken()) {
        this.isPreviewImage = false
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      if (this.userTx == "/static/mr_tx.png") {
        this.getIsUserTxTips()
        return
      }
      if (!this.status) {
        this.tipsShow = true
        return
      }
      if (item.memberUserId == this.userId) {
        this.$toast("不能给自己发私信！")
        return
      }
      uni.showLoading({
        title: "加载中...",
      })
      this.isPreviewImage = false
      let setData = JSON.stringify({
        id: item.id,
        bAvatar: item.avatar,
        memberUserId: this.userId,
        memberUserName: this.userName,
        chatUserId: item.memberUserId,
        chatUserName: item.memberUserName,
      })
      console.log(setData)
      api.user
        .jb_exposure({
          userId: item.memberUserId,
        })
        .then((res) => {
          if (res.code == 200) {
            if (!res.data) {
              uni.hideLoading()
              this.$toast('用户不存在!')
              return
            }
            if (res.data.exposure) {
              this.isRefresh3 = 1
              res.data.createTime = formatDateAll(res.data.createTime)
              this.jbShow = true
              this.jbMsg = JSON.stringify({
                memberUserId: item.memberUserId,
                id: item.id,
                bAvatar: item.avatar,
                memberUserName: item.memberUserName,
                createTime: res.data.createTime,
                exposure: res.data.exposure,
                groupName: res.data.groupName,
              })
            } else {
              console.log("跳转私信")
              console.log(setData)
              uni.navigateTo({
                url: `/pages/chat/index?setData=${setData}&reply=${false}`,
              })
            }
            uni.hideLoading()
          } else {
            uni.hideLoading()
            this.$toast(res.msg)
          }
        })
    },

    changeCityPop() {
      this.isCityShow = true
      this.isRefresh1 = 1
    },

    async getList(state) {
      this.intoView = ""
      let positionNum = 0
      if (this.messageId) {
        await api.user.getNewsCount({messageId: this.messageId}).then((res) => {
          positionNum = res.data
          if (res.data) {
            if (res.data < 20) {
              this.param.pageSize = 20
            } else {
              this.param.pageSize = res.data
            }
          } else {
            uni.showModal({
              title: "温馨提示",
              content: "该消息已被撤回~",
              showCancel: false,
            })
            this.param.pageSize = 20
            this.messageId = ''
          }
        })
      }
      await api.user.news_list(this.param).then((res) => {
        if (res.code == 200) {
          this.getScrollHeight()
          uni.hideLoading()
          if (state) {
            this.list = []
          }
          if (this.param.pageNo && !res.data.list.length) {
            return
          }
          res.data.list.map((item) => {
            item.utilTime = getTimeUtils(item.createDate)
          })
          this.list = res.data.list.concat(this.list);
          const lastItemId = 'item' + (res.data.list.length + 1);
          this.$nextTick(() => {
            if (this.messageId) {
              const itemIndex = this.list.findIndex(item => item.id === this.messageId);
              this.intoView = `item${itemIndex}`
              this.messageId = ''
            } else {
              if (state) {
                this.intoView = `item${this.approvedList.length - 1}`
                console.log("intoView", this.intoView)
              } else {
                this.intoView = lastItemId
              }
            }
          })
          // },500);
        } else {
          this.messageId = ''
          uni.hideLoading()
        }
      })

      setTimeout(() => {
        this.loadingShow = false
      }, 500)
    },

    // 确定接单群
    changeCity(e) {
      this.param.pageNo = 1
      this.groupName = e.name
      this.cityMsg = e
      this.isCityShow = false
      this.param.sendGroupUserId = e.id
      this.getList(true)
    },

    // 关闭刷单群弹窗
    closeCity() {
      this.isCityShow = false
      this.isRefresh1 = 0
    },

    // 跳转担保交易
    toGuarantee() {
      this.isPreviewImage = false
      if (!getUserToken() && this.isExamine) {
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      if (this.userTx == "/static/mr_tx.png") {
        this.getIsUserTxTips()
        return
      }
      if (!this.status && this.isExamine) {
        this.tipsShow = true
        return
      }
      uni.navigateTo({
        url: "/pages/guarantee/index",
      })
    },

    // 跳转曝光台
    toExposure() {
      this.isPreviewImage = false
      if (!getUserToken() && this.isExamine) {
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      if (this.userTx == "/static/mr_tx.png") {
        this.getIsUserTxTips()
        return
      }
      if (!this.status && this.isExamine) {
        this.tipsShow = true
        return
      }
      uni.navigateTo({
        url: "/pages/exposure/index",
      })
    },

    // 跳转公司库
    toCompany() {
      // this.$toast('该功能即将上线！')
      // return
      if (!getUserToken() && this.isExamine) {
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      if (this.userTx == "/static/mr_tx.png") {
        this.getIsUserTxTips()
        return
      }
      uni.navigateTo({
        url: "/pages/company/index",
      })
    },

    // 跳转本地宝
    toLocal() {
      this.isPreviewImage = false
      if (!getUserToken() && this.isExamine) {
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      if (this.userTx == "/static/mr_tx.png") {
        this.getIsUserTxTips()
        return
      }
      if (!this.status && this.isExamine) {
        this.tipsShow = true
        return
      }
      uni.navigateTo({
        url: "/pages/local/index",
      })
    },

    // 发布信息弹窗
    clickReleasePop() {
      if (!getUserToken() && this.isExamine) {
        this.isPreviewImage = false
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      if (this.userTx == "/static/mr_tx.png") {
        this.getIsUserTxTips()
        return
      }
      if (!this.status && this.isExamine) {
        this.tipsShow = true
        return
      }
      if (!this.notUsedCount && !this.status) {
        // 没得发言条数
        this.isRefresh4 = 1
        this.activeShow = true
        return
      }

      if (!this.notUsedCount && this.status) {
        //已激活，有发布条数
        uni.navigateTo({
          url: "/pages/taocan/index",
        })
        return
      }
      this.isRefresh = 1
      this.releaseShow = true
    },

    // 关闭发布弹窗
    closeRelease(e) {
      console.log(e)
      if (e) {
        this.param.pageNo = 1
        this.getFbNum()
        this.getList(true)
      }
      this.releaseShow = false
      this.isRefresh = 0
    },

    // 私信
    clickMessagePop() {
      if (!getUserToken()) {
        this.isPreviewImage = false
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      if (!this.status) {
        this.tipsShow = true
        return
      }
      this.isRefresh2 = 1
      this.messageShow = true
    },

    // 关闭公告
    closeTips(e) {
      console.log(e)
      this.tipsShow = false
      if (e) {
        this.activeShow = true
        this.isRefresh4 = 1
      }
    },

    // 关闭默认弹窗
    closeMr(e) {
      if (e) {
        this.isPreviewImage = false
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      this.mrShow = false
    },

    // 激活弹窗关闭
    closeActive(state) {
      this.activeShow = false
      this.isRefresh4 = 0
      if (state) {
        this.getUserInfo()
      }
    },

    // 关闭私信弹窗
    closeMessage(e) {
      this.messageShow = false
      this.isRefresh2 = 0
    },

    // 关闭举报弹窗
    closeJp() {
      this.jbShow = false
      this.isRefresh3 = 0
    },

    handleScrollToUpper() {
      if (this.scrollTop < 1000) {
        console.log("滚动到顶部了")
        this.loadingShow = true
        this.isFx = false
        this.param.pageSize = 20
        this.param.pageNo++
        this.getList(false)
      }
    },
    onScroll(event) {
      const deltaY = event.detail.deltaY
      this.scrollTop = event.detail.scrollTop
      // if (deltaY > 0) {
      //   this.isFx = true
      // } else {
      //   this.isFx = false
      // }

    },

    // 关闭公告
    closeNotice() {
      this.noticeShow = false
    },

    // 跳转群成员
    toGroup() {
      this.isPreviewImage = false
      if (!getUserToken() && this.isExamine) {
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      if (this.userTx == "/static/mr_tx.png") {
        this.getIsUserTxTips()
        return
      }
      if (!this.status && this.isExamine) {
        this.tipsShow = true
        return
      }
      uni.navigateTo({
        url: `/pages/group/index?groupId=${this.param.sendGroupUserId}`,
      })
    },

    // 跳转聊天记录
    toChatHistory() {
      if (!getUserToken() && this.isExamine) {
        uni.navigateTo({
          url: `/pages/authorization/index?shareUserId=${this.shareUserId}`,
        })
        return
      }
      if (this.userTx == "/static/mr_tx.png") {
        this.getIsUserTxTips()
        return
      }
      uni.navigateTo({
        url: `/pages/chathistory/index`,
      })
    },

    // 长按撤回
    onLongPress(index) {
      const item =  this.list[index]
      const num = this.minutesAgo(item.createDate)
      if (num > 3) {
        console.log('超过撤回时间了')
        return
      }
      this.$set( this.list[index], 'isWithdraw', true);
    },

    // 隐藏撤回
    clickHidePress(index) {
      if (this.list[index].isWithdraw) {
        this.$set(this.list[index], 'isWithdraw', false);
      }
    },

    // 撤回功能
    clickWithdraw(item) {
      uni.showModal({
        title: "提示",
        content: "是否撤回该消息？",
        success: async (res) => {
          if (res.confirm) {
            const data = {
              deleted: 1,
              id: item.id
            }
            console.log(data)
            await api.user.deleteNews(data).then((res) => {
              if (res.code == 200) {
                this.list = this.list.filter(it => it.id !== item.id);
                this.$toast("已撤回~")
              } else {
                this.$toast("撤回失败，请稍后再试~")
              }
            })
          }
        },
      });
    },

    // 撤回的时长
    minutesAgo(timestamp) {
      const now = Date.now()
      const diff = now - timestamp
      return Math.floor(diff / 1000 / 60)
    }
  },
  beforeMount() {
    const self = this
    wx.getSystemInfo({
      success(system) {
        self.statusBarHeight = system.statusBarHeight
        let platformReg = /ios/i
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44
        } else {
          self.titleBarHeight = 40
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight
      },
    })
  },
  onShareAppMessage() {
    return {
      title: "免费用万人接单群",
      path: `/pages/index/index?shareUserId=${this.userId}`,
    }
  },
  onShareTimeline() {
    return {
      title: '免费用万人接单群',
    }
  }
}
</script>

<style lang="scss" scoped>
$tx_height: 92rpx;
$input_an_height: 80rpx;
$colors: (
  (#e080f1, #8532f1, #8734f3),
  (#58abf9, #165dff, #3b74f5),
  (#94e57e, #00ac1d, #10bc00),
  (#f5d03b, #ffaa16, #f5b13b),
  (#ff5a0e, #ff1616, #ff3838)
);

@mixin content-flex($pitch) {
  display: flex;
  align-items: center;
  justify-content: $pitch;
}

.content {
  min-height: 100vh;

  .head_box {
    // padding-bottom:50rpx;
    position: relative;

    .bj {
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
    }

    .box {
      @include content-flex(space-between);
      height: 110rpx;
      padding: 0 30rpx;
      position: relative;
      z-index: 10;

      div {
        @include content-flex(center);
        width: 88%;
        height: 72rpx;
        background: #ffffff;
        border-radius: 12rpx;
        font-size: 32rpx;
        color: #4e5969;
        font-weight: bold;
        box-shadow: 0px 8rpx 20rpx 0px rgba(59, 116, 245, 0.1);
        position: relative;
        p {
          margin-right: 12rpx;
        }
        .search {
          width: 100rpx;
          height: 100%;
          position: absolute;
          right: 0rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        img {
          width: 34rpx;
          height: 34rpx;
          
        }
      }

      img {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  .list_box {
    width: 100%;
    background: #fff;
    // margin-top:-46rpx;
    border-radius: 20rpx 20rpx 0px 0px;
    position: relative;
    z-index: 10;

    // height: calc(100vh - 105px - 115px);
    .loading_more {
      margin: 30rpx 0;
    }
  }

  .list {
    padding: 0 26rpx;

    &:first-child {
      padding-top: 30rpx;
    }

    .time {
      text-align: center;
      padding-bottom: 30rpx;
      font-size: 24rpx;
      color: #999999;
    }

    .yq {
      font-size: 26rpx;
      color: #c9c9c9;
      text-align: center;
      padding-bottom: 50rpx;
      span {
        color: #90c498;
        margin: 0 6rpx;
      }
    }

    .left {
      width: 100%;
      display: flex;
      margin-bottom: 40rpx;

      img {
        width: $tx_height;
        height: $tx_height;
        border-radius: 8rpx;
      }

      .b {
        max-width: 86%;

        .name {
          color: #666666;
          font-size: 26rpx;
          margin: 0 0 6rpx 18rpx;
        }

        .text {
          background: #f1f1f1;
          margin: 0 0 0 18rpx;
          font-size: 30rpx;
          color: #333;
          padding: 24rpx;
          border-radius: 0 20rpx 20rpx 20rpx;
          word-wrap: break-word;
          overflow-wrap: break-word;
          display: inline-block;

          .img_list {
            max-width: 100% !important;

            img {
              margin-top: 20rpx;
              width: 150rpx;
              height: 150rpx;
              margin-right: 20rpx;
              border-radius: 8rpx;

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
      }
    }

    .right {
      @extend .left;
      justify-content: flex-end;
      .withdraw {
        position: absolute;
        top: -80rpx;
        left: 0;
        opacity: 0;
        transition: all 0.3s;
        &.on {
          opacity: 1;
        }
        .text-bg {
          color: #fff;
          background: #000;
          width: 80rpx;
          height: 56rpx;
          line-height: 56rpx;
          text-align: center;
          border-radius: 10rpx;
          font-size: 28rpx;
        }
        // 三角形
        .sjx {
          position: relative;
          width: 0;
          height: 0;
          border-left: 10rpx solid transparent;
          border-right: 10rpx solid transparent;
          border-top: 10rpx solid #000;
          margin:0 auto;
        }
      }
      .name {
        margin: 0 18rpx 6rpx 0 !important;
        text-align: right;
      }

      .text {
        position: relative;
        background: #23ac39 !important;
        color: #fff !important;
        margin: 0 18rpx 0 0 !important;
        border-radius: 20rpx 0rpx 20rpx 20rpx !important;
      }

      .tag {
        display: inline-block;
        text-align: center;
        font-size: 24rpx;
        color: #e6a23c;
        background: #fdf6ec;
        border: 1px solid #faecd8;
        padding: 4rpx 10rpx;
        border-radius: 10rpx;
        margin: 8rpx 0 0 40rpx;
      }
    }
  }

  .no_data {
    text-align: center;
    margin-top: 100rpx;

    img {
      width: 320rpx;
      height: 320rpx;
    }

    p {
      font-size: 24rpx;
      color: #999999;
      margin-top: -40rpx;
    }
  }

  .input_box {
    width: 100%;
    height: 210rpx;
    z-index: 10;
    position: relative;
    z-index: 10;

    .box {
      width: 94%;
      padding: 24rpx;
      position: fixed;
      bottom: 0;
      background: #fff;
      box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.3);
      .label {
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;

        p {
          @include content-flex(unset);
          padding: 12rpx 6rpx;
          background: #fff;
          border-radius: 10rpx;
          color: #fff;
          font-size: 24rpx;
          @for $i from 1 through length($colors) {
            &:nth-child(#{$i}) {
              $start-color: nth(nth($colors, $i), 1);
              $end-color: nth(nth($colors, $i), 2);
              $border-color: nth(nth($colors, $i), 3);
              background: linear-gradient(
                270deg,
                $start-color 0%,
                $end-color 100%
              );
              border: 1px solid $border-color;
            }
          }

          img {
            width: 30rpx;
            height: 30rpx;
            margin-right: 6rpx;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .sr_input {
        @include content-flex(space-between);

        div {
          @include content-flex(unset);
          background: #f1f1f1;
          border-radius: 10rpx;
          height: $input_an_height;
          padding: 0 28rpx;
          color: #333;
          font-size: 28rpx;

          &:first-child {
            width: 62%;
          }

          &:last-child {
            width: 18%;
          }

          img {
            width: 40rpx;
            height: 40rpx;
            margin-right: 20rpx;
          }
        }
      }
    }
  }

  .ewm_box {
    width: 650rpx;
    height: auto;
    background: #fff;
    border-radius: 12rpx;
    text-align: center;
    padding-bottom: 30rpx;

    .close {
      display: flex;
      justify-content: flex-end;
      padding-top: 24rpx;
      margin-right: 30rpx;
    }

    img {
      width: 90%;
      height: 300rpx;
    }

    p {
      font-size: 32rpx;
      padding-bottom: 30rpx;
    }
  }

  .close1 {
    text-align: center;
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    border: 1px solid #00ac1d;
    color: #00ac1d;
    margin: 0 auto;
    font-size: 30rpx;
    border-radius: 50rpx;
    padding: 0 !important;
  }

  .gg_box {
    position: fixed;
    top: 30rpx;
    left: 0;
    // background: linear-gradient(180deg, #D3F6D9 0%, #FFFFFF 100%);
    width: 100%;

    .box {
      padding: 30rpx 22rpx;
      border-radius: 12rpx;
      background: #ededed;
      border-radius: 20rpx;
      margin: 0 30rpx;
      display: flex;
      box-shadow: 0 12rpx 15rpx #d2d2d2;

      .img {
        width: 88rpx;
        height: 88rpx;
        background: #aaa;
        border-radius: 10rpx;
      }

      div {
        flex: 1;
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
          color: #3d3d3d;
          font-size: 28rpx;
        }

        .text {
          color: #999999;
          font-size: 28rpx;
        }
      }

      .close {
        width: 90rpx;
        position: absolute;
        right: 30rpx;
        bottom: 0;
        display: flex;
        justify-content: center;
        padding: 6rpx 0;
        font-size: 24rpx;
        color: #fff;
        background: #ff463f;
        border-bottom-right-radius: 20rpx;
      }
    }
  }
}

.kehu_box {
  position: fixed;
  right: 30rpx;
  bottom: 24%;
  z-index: 100;
  background: #fff;
  border-radius: 50%;
  width: 76rpx;
  height: 76rpx;

  button::after {
    border: none;
  }

  button {
    background: none;
    padding: 0;
    margin: 0;
  }

  img {
    width: 76rpx;
    height: 76rpx;
  }
}
.context-menu {
  position: absolute;
  bottom: 60px; /* 距离底部的距离 */
  right: 10px; /* 距离右侧的距离 */
  background-color: red; /* 背景颜色 */
  border: 1px solid #ccc; /* 边框颜色和宽度 */
  border-radius: 5px; /* 圆角 */
  padding: 10px; /* 内边距 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  z-index: 1000; /* 确保菜单在其他内容之上 */
}

.context-menu button {
  margin: 5px 0; /* 按钮之间的间距 */
  padding: 8px 12px; /* 按钮内边距 */
  font-size: 14px; /* 按钮文字大小 */
  border: none; /* 按钮无边框 */
  border-radius: 4px; /* 按钮圆角 */
  background-color: #007aff; /* 按钮背景颜色 */
  color: #fff; /* 按钮文字颜色 */
  cursor: pointer; /* 鼠标悬停时的指针样式 */
}

.context-menu button:active {
  background-color: #0056b3; /* 按钮按下时的背景颜色 */
}
</style>
